<!-- 关卡 -->
<template>
  <div class="app-container">
    <div class="btns">
      <k-button class="top-btn" value="添加" @click.native="addBoxDialog" />

      <el-upload
        style="display: inline-block; margin-left: 10px;"
        :show-file-list="false"
        accept=".pdf, .doc, .docx, .xls, .xlsx"
        :headers="uploadHeaders"
        :action="action"
        :data="objdata"
        :limit="1"
        :on-success="OnSuccess"
      >
        <k-button value="批量导入" />
      </el-upload>
    </div>

    <!--表格相关 -->
    <el-table
      :data="itemDataInfo"
      fit
      row-key="id"
      highlight-current
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="goodName" min-width="100px" label="饰品" align="center" show-overflow-tooltip />
      <el-table-column prop="price" min-width="100px" label="价值" align="center" show-overflow-tooltip />
      <el-table-column prop="mobile" min-width="150px" label="用户名" align="center" />
      <el-table-column prop="drawFlagString" min-width="150px" label="是否领取" align="center" />
      <el-table-column prop="drawTime" min-width="150px" label="领取时间" align="center" />
      <el-table-column min-width="120px" label="操作" align="center">
        <template slot-scope="scope">
          <k-button class="table-btn" value="修改" @click.native="post(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="getItemData"
    />

    <!-- 添加排名信息弹窗 -->
    <k-dialog
      :show-hide.sync="addBoxShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      :title="title"
      :show-foot="false"
      :two-btn="true"
      :close-fun="handleCloseDialog"
      @click="saveBoxDataEvent"
    >
      <div class="dialog-giveBabySetting">
        <div style="padding:20px;margin-left:50px">
          <el-form :model="rankingDataFoem" label-width="auto">
            <el-form-item label="添加饰品：">
              <el-select v-model="rankingDataFoem.goodId" style="width: 100%;" filterable placeholder="请选择">
                <el-option
                  v-for="item in resultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </k-dialog>

    <el-dialog
      :visible.sync="BugVisible"
      title="导入错误"
      width="80%"
      :before-close="handleClose"
      append-to-body
    >
      <el-table :data="BugData">
        <el-table-column label="行数" width="200">
          <template slot-scope="scope">
            <strong style="color: red;"> {{ scope.row.row }}</strong>
          </template>
        </el-table-column>
        <el-table-column align="center" label="饰品名称" width="200">
          <template slot-scope="scope">
            <strong style="color: red;"> {{ scope.row.name }}</strong>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { recordListData, saveRanking, updateRanking, deleteRanking } from '@/api/levelActivity/index.js'
import { getGoodsPlatformList } from '@/api/rules/listdata'
import { getToken } from '@/utils/auth' // get token from cookie
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        id: ''
      },
      totalRows: 0,
      itemDataInfo: [],
      resultList: [],
      // 弹框
      title: '',
      addBoxShow: false,
      rankingDataFoem: {
        rankingId: '',
        goodId: []
      },
      action: process.env.VUE_APP_BASE_API + '/activityCustoms/import',
      uploadHeaders: {
        'Authorization': getToken()
      },
      objdata: {
        rankingId: 0
      },
      BugVisible: false,
      BugData: []
    }
  },

  mounted() {
    this.getItemData()
  },

  methods: {
    // 处理上传
    // 导入
    OnSuccess(response) {
      console.log('response: ', response)
      const { data } = response
      if (data.success) {
        this.getItemData()
        this.$message.success('保存成功')
        return
      }
      this.BugVisible = true
      this.BugData = data.data
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    plusGiveBabyChange(value) {
      this.checkedplusBabyList = value
    },

    getItemData() {
      this.listQuery.id = this.$route.query.id
      this.objdata.rankingId = this.$route.query.id
      recordListData(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.itemDataInfo = res.data.rows
      })
    },
    // 请求饰品
    getGoodsPlatformList(call) {
      getGoodsPlatformList({ 'key': '', 'alreadyIds': '[-1]' }).then(res => {
        this.resultList = []
        Object.assign(this.resultList, res.data)
        call()
      })
    },
    // 修改
    post(item) {
      this.getGoodsPlatformList(() => {
        this.title = '修改'
        this.rankingDataFoem = { ...item }
        this.addBoxShow = true
      })
    },
    // 删除
    async Delete(id) {
      try {
        await deleteRanking({ id })
        this.$message.success('删除成功')
        this.getItemData()
      } catch (error) {
        console.error('error: ', error)
      }
    },
    // 排名配置
    SetRanking(id) {
      console.log('id: ', id)
    },

    // 开启
    addBoxDialog() {
      this.getGoodsPlatformList(() => {
        this.addBoxShow = true
        this.title = '添加'
        this.$resetForm(this.rankingDataFoem)
      })
    },

    // 保存
    saveBoxDataEvent() {
      const param = { ...this.rankingDataFoem }
      param.rankingId = this.$route.query.id
      if (param.id) {
        updateRanking(param).then((result) => {
          if (!result.data.success) {
            this.$message.success(result.data.msg)
            return
          }
          this.$message.success(result.data.msg)
          this.handleCloseDialog()
          this.getItemData()
        })
      } else {
        saveRanking(param).then((result) => {
          if (!result.data.success) {
            this.$message.success(result.data.msg)
            return
          }
          this.$message.success(result.data.msg)
          this.handleCloseDialog()
          this.getItemData()
        })
      }
    },

    // 关闭
    handleCloseDialog() {
      this.addBoxShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.addBox-dialog {
	::v-deep .el-dialog__body {
		width: 678px;
		padding: 10px 30px 30px 30px;
	}
	::v-deep .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
		font-size: 40px;
	}
	::v-deep .el-select .el-select__tags > span {
		display: none;
	}
	.el-tag + .el-tag {
		margin-left: 10px;
	}
	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;
		::v-deep .el-tag__close {
			color: $mainColor;
		}
		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.give-dialog {
	::v-deep .el-dialog__body {
		width: 678px;
		text-align: center;
	}
	.give_div {
		margin: 0 auto;
		padding: 50px 0px;
		height: 400px;
	}
}
.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.room-type,
	.user-status,
	.account-status {
		margin-right: 20px;
	}
}
.btns {
	position: relative;
	height: 50px;
	margin-bottom: 30px;
	.el_switch_top {
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.cell-baby {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.ellipsis-span {
	width: 100px;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.md{
    display: inline-block;
    margin-left: 10px;
  }
</style>
